﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
     <script type="text/javascript" src="../js/track.js"/>
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            width="2000" height="600" version="1.1">
            <radialGradient id="grad1" cx="20%" cy="30%" r="100%">
                <stop offset="0%" style="stop-color: rgb(255,255,255); stop-opacity: 0" />
                <stop offset="100%" style="stop-color: #F5D06C; stop-opacity: 0.4" />
            </radialGradient>
            <rect width="100%" height="100%" fill="url(#grad1)" />
            <g id="main">
                <!--wave-->
                <line x1="0" y1="600" x2="150" y2="600" db-pad="ground" />
                <line x1="150" y1="600" x2="200" y2="550" db-pad="ground" />
                <line x1="200" y1="550" x2="250" y2="600" db-pad="ground" />
                <circle cx="200" cy="550" r="1" db-pad="ground" />
                <line x1="250" y1="600" x2="300" y2="550" db-pad="ground" />
                <line x1="300" y1="550" x2="350" y2="600" db-pad="ground" />
                <circle cx="300" cy="550" r="1" db-pad="ground" />
                <line x1="350" y1="600" x2="400" y2="550" db-pad="ground" />
                <line x1="400" y1="550" x2="450" y2="600" db-pad="ground" />
                <circle cx="400" cy="550" r="1" db-pad="ground" />
                <g transform="translate(500 500)" db-cat="reward" />
                <line x1="550" y1="600" x2="600" y2="550" db-pad="ground" />
                <line x1="600" y1="550" x2="650" y2="600" db-pad="ground" />
                <circle cx="600" cy="550" r="1" db-pad="ground" />
                <line x1="650" y1="600" x2="700" y2="550" db-pad="ground" />
                <line x1="700" y1="550" x2="750" y2="600" db-pad="ground" />
                <circle cx="700" cy="550" r="1" db-pad="ground" />
                <!--groud-->
                <line x1="750" y1="600" x2="1150" y2="600" db-pad="ground" />
                <g id="moving" transform="translate(1250 100)" db-cat="reward" />
                <g transform="translate(1320 500)" db-cat="reward" />
                <line x1="1350" y1="600" x2="2000" y2="600" db-pad="ground" />
                <!--target-->
                <line x1="1800" y1="300" x2="1960" y2="300" db-cat="target" />
                <line x2="1800" y2="310" x1="1960" y1="310" db-pad="wood" />
                <circle cx="1800" cy="300" r="5" db-pad="wood" />
                <circle cx="1960" cy="300" r="5" db-pad="wood" />
                <line x2="2000" y2="0" x1="2000" y1="600" db-pad="wood" />
            </g>
            <rect id="dummy" width="100%" height="100%" fill-opacity="0">
            </rect>
            <g id="front">
                <defs>
                    <marker id="mTriangle" markerWidth="50" markerHeight="100" refX="50" refY="50" orient="auto">
                        <path d="M 0 0 50 50 0 100 Z" style="fill: black;" />
                    </marker>
                </defs>
            </g>
        </svg>
    </div>
    <div id="skip">
        &lt;&lt; Skip Preview
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        db.path = [{ x: 0, y: 300 }, { x: 2000, y: 300}];
        //        db.isInBoundary = function (x, y) {
        //            return y < 1400;
        //        }

        //highlightDesign();

        db.isInBoundary = function (x, y) {
            return y < 600;
        }

        var move = $("#moving");
        var y = 100;
        var dir = 1;
        db.setTimer(null, function () {
            if (y < 100 || y > 500)
                dir *= -1;
            y += dir;
            move.setTranslate(1250, y);
        });
        startGame();
    //]]>
    </script>
</body>
</html>
